/*
 * @Author: silas 
 * @Date: 2021-03-15 17:27:43 
 * @Last Modified by: silas
 * @Last Modified time: 2021-04-28 11:29:13
 */

<template>
    <div class="compilationSummary">
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="90px"
                class="formList"
            >
                <el-form-item label="账期" size="mini">
                    <el-date-picker v-model="form.month" type="month" value-format="yyyyMM"></el-date-picker>
                </el-form-item>
                <el-form-item label="预算管理单位" size="mini">
                    <el-select v-model="form.unit" clearable multiple  collapse-tags>
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option 
                            v-for="(it, i) in unitList"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="投资渠道" size="mini">
                    <el-select v-model="form.channel" clearable multiple collapse-tags>
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="(it, i) in channelList"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="立项年份" size="mini">
                    <el-select v-model="form.years" clearable multiple collapse-tags>
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="(it, i) in yearsList"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目状态" size="mini">
                    <el-select v-model="form.status" clearable multiple collapse-tags>
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="(it, i) in statusList"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="一级专业" size="mini">
                    <el-select v-model="form.id" clearable multiple collapse-tags>
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="(it, i) in idList"
                            :key="i"
                            :label="it.indexName"
                            :value="it.indexCode"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否科研项目" size="mini">
                    <el-select v-model="form.tecFlg" clearable>
                        <el-option
                            v-for="(it, i) in tecFlg"
                            :key="i"
                            :label="it.label"
                            :value="it.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="二级专业" size="mini">
                    <el-select v-model="form.id2" clearable>
                        <el-option
                            v-for="(it, i) in idList2"
                            :key="i"
                            :label="it"
                            :value="it"
                        ></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item style="width: 19%;">
                    <div class="g-btn-wrapper">
                        <div class="g-cell">
                            <el-button
                                size="mini"
                                style="margin-left: 12px"
                                type="primary"
                                @click="search"
                                >查询</el-button
                            >
                            <el-button
                                size="mini"
                                type="orange"
                                @click="handle_export"
                                >导出</el-button
                            >
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
         <p class="g-unit">单位: 万元</p>
        <div class="table-content clearfix">
            <div class="tableBox">
                <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width: 100%"
                    class="tableTh28"
                    height="73vh"
                    stripe
                >
                    <el-table-column
                        label="建设单位"
                        min-width="120"
                        prop="companyName"
                    />
					<el-table-column
                        label="预算数"
                        prop="investmentNum"
                    />
					<el-table-column
                        label="预算完成数"
                        prop="investmentCompleteNum"
                    />
					<el-table-column
                        label="预算完成率"
                    >
                        <template slot-scope="scope">{{+scope.row.investmentCompleteRate > 0 ? scope.row.investmentCompleteRate + '%' : '0'}}</template>
                    </el-table-column>
					<el-table-column
                        label="项目总投资"
                        prop="investmentAmount"
                    />
					<el-table-column
                        label="累计资本支出"
                        prop="ljCapitalOut"
                    />
					<el-table-column
                        label="项目结转额"
                        prop="carryOverAmount"
                    />
					<el-table-column
                        label="项目结转率"
                    >
                        <template slot-scope="scope">{{+scope.row.carryOverRate > 0 ? scope.row.carryOverRate + '%' : '0'}}</template>
                    </el-table-column>
                    <el-table-column
                        label="项目数"
                        prop="projectCount"
                    />
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import FileSaver from "file-saver";
import XLSX from "xlsx";
const exportUrl = prefixAPI.pack;
export default {
    name: "constructionUnit",
    data() {
        return {
            form: {
                unit: "",
                channel: "",
                years: "",
                status: "",
                id: "",
                id2: "",
                month: '',
                tecFlg: '0',
            },
            tecFlg: [
                {
                    label: '是',
                    value: '1'
                },
                {
                    label: '否',
                    value: '0'
                },
            ],
            tableData: [],
            tableLoading: false,
            status: [],
            unitList: [],
            channelList: [],
            yearsList: [],
            statusList: [],
            idList: [],
            idList2: [],
            maxUnit: '',
            maxChannel: '',
            maxYears: '',
            maxStatus: '',
            maxId: '',
        };
    },
    watch: {
        'form.unit' (newValue, oldValue) {
            if(this.form.unit.indexOf('all') >= 0) {
                var data = [];
                this.unitList.map(it => {
                    data.push(it);
                })
                this.form.unit = data;
            }
            if(this.form.unit.indexOf('cancel') >= 0) {
                this.form.unit = [];
            }
        },
        'form.channel' (newValue, oldValue) {
            if(this.form.channel.indexOf('all') >= 0) {
                var data = [];
                this.channelList.map(it => {
                    data.push(it);
                })
                this.form.channel = data;
            }
            if(this.form.channel.indexOf('cancel') >= 0) {
                this.form.channel = [];
            }
        },
        'form.years' (newValue, oldValue) {
            if(this.form.years.indexOf('all') >= 0) {
                var data = [];
                this.yearsList.map(it => {
                    data.push(it);
                })
                this.form.years = data;
            }
            if(this.form.years.indexOf('cancel') >= 0) {
                this.form.years = [];
            }
        },
        'form.status' (newValue, oldValue) {
            if(this.form.status.indexOf('all') >= 0) {
                var data = [];
                this.statusList.map(it => {
                    data.push(it);
                })
                this.form.status = data;
            }
            if(this.form.status.indexOf('cancel') >= 0) {
                this.form.status = [];
            }
        },
        'form.id' (newValue, oldValue) {
            if(this.form.id.indexOf('all') >= 0) {
                var data = [];
                this.idList.map(it => {
                    data.push(it.indexCode);
                })
                this.form.id = data;
            }
            if(this.form.id.indexOf('cancel') >= 0) {
                this.form.id = [];
            }
        },

    },
    created() {
        var that = this;

        that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        that.form.areaId = that.accountInfo.areaId;
        that.form.year = that.moment().format("YYYY");
        that.getMonth();
        // this.init();
    },
    // mounted() {
    //   this.init();
    // },
    methods: {
        getMonth() {
            $budgetAPI.getCompanyMaxAcctMonth({}, res=> {
                if(res && res.code == 0) {
                    this.form.month = res.content;
                }
            })
        },
        //查询
        search() {
            this.getData(this.form);
        },
        getData() {
            var that = this;

			that.tableLoading = true;

            $budgetAPI.getBuilderCompanyDataList(
                {
                    acctMonth: that.form.month,
                    tecFlg: that.form.tecFlg,
                    companyName: that.form.unit.length == that.maxUnit ? '' : that.form.unit.toString(),
                    channel: that.form.channel.length == that.maxChannel ? '' : that.form.channel.toString(),
                    year: that.form.years.length == that.maxYears ? '' : that.form.years.toString(),
                    status: that.form.status.length == that.maxStatus ? '' : that.form.status.toString(),
                    indexCode: that.form.id.length == that.maxId ? '' : that.form.id.toString(),
                },
                (res) => {
					if(res && res.code == 0) {
						that.tableData = res.content;
					} 
					that.tableLoading = false;
				}
            );
        },
        progress(event, file, fileList) {
            this.loading = this.$loading({
                lock: true,
                text: "正在导入",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
        },
        // 模板下载
        template_download() {
            let token = getCookie("token");
            let year = this.form.year;
            // 根据不同模式切换不同的路径
            if (process.env.NODE_ENV == "development") {
                window.location.href =
                    prefixAPI.loc +
                    "/api/releaseReport/downLoadTemplate?testYear=" +
                    year +
                    "&token=" +
                    token;
            } else if (process.env.NODE_ENV == "production") {
                window.location.href =
                    prefixAPI.hp +
                    "/api/releaseReport/downLoadTemplate?testYear=" +
                    year +
                    "&token=" +
                    token;
            }
        },
        async init() {
            let that = this, 
				unit = await that.getUnit(), 
				channel = await that.getChannel(),
				years = await that.getYears(),
				status = await that.getStatus(),
				idList = await that.getIdList();
          

            that.maxUnit =  unit.length;
            that.maxChannel = channel.length;
            that.maxYears = years.length;
            that.maxStatus = status.length;
            that.maxId = idList.length;

            that.unitList = unit; // 建设单位列表
            that.channelList = channel; // 投资渠道列表
            that.yearsList = years; // 投资渠道列表
            that.statusList = status; // 获取项目状态列表
            that.idList = idList; // 获取项目状态列表
            
            // 集团存续本部,集团股份本部
            for (let index = 0; index < unit.length; index++) {
                const ele = unit[index];
                if(ele == '集团存续本部' || ele == '集团股份本部') {
                    continue;
                }
                that.form.unit.push(ele);
            }
            that.getData();
        },
        getUnit() {
            return new Promise((resolve) => {
                $budgetAPI.getMgrCompany(
                    {
                        type: 1,
                    },
                    (res) => {
                        if (res && res.code == 0) {
                            resolve(res.content);
                        } else {
                            resolve([]);
                        }
                    }
                );
            });
        },
        getChannel() {
            return new Promise((resolve) => {
                $budgetAPI.getInvestmentChannel(
                    {
                        type: 1,
                    },
                    (res) => {
                        if (res && res.code == 0) {
                            resolve(res.content);
                        } else {
                            resolve([]);
                        }
                    }
                );
            });
        },
        getYears() {
            return new Promise((resolve) => {
                $budgetAPI.getApprovalYears(
                    {
                        type: 1,
                    },
                    (res) => {
                        if (res && res.code == 0) {
                            resolve(res.content);
                        } else {
                            resolve([]);
                        }
                    }
                );
            });
        },
        getStatus() {
            return new Promise((resolve) => {
                $budgetAPI.getProjectStatus(
                    {
                        type: 1,
                    },
                    (res) => {
                        if (res && res.code == 0) {
                            resolve(res.content);
                        } else {
                            resolve([]);
                        }
                    }
                );
            });
        },
        getIdList() {
            var that = this;

            return new Promise((resolve) => {
                $budgetAPI.getIDList2(
                    {
                        acctYear: that.moment().format("YYYY"),
                    },
                    (res) => {
                        resolve(res.content);
                    }
                );
            });
        },
        handle_export() {
            var companyName = this.form.unit,
                channel = this.form.channel,
                year = this.form.years,
                status = this.form.status,
                code = this.form.id, 
                acctMonth = this.form.month,
                tecFlg = this.form.tecFlg,
                token = getCookie("token");

            window.open(`${exportUrl}/builder/exportBuilderCompanyDataList?companyName=${companyName}&channel=${channel}&year=${year}&status=${status}&indexCode=${code}&acctMonth=${acctMonth}&tecFlg=${tecFlg}&token=${token}`, "_self");
        }
    },
};
</script>

<style lang="scss" scoped>
.compilationSummary {
    .formList {
        margin-top: 20px;
        padding-bottom: 20px;
        /deep/ .el-form-item {
            width: 23%;
        }
    }
    .g-btn-wrapper {
        display: flex;
        .g-cell {
            flex: 1;
            button {
                padding: 7px 15px;
            }
        }
        .g-btns {
            text-align: right;
        }
    }
    .table-content {
        .table-header {
            display: flex;
            justify-content: space-between;

            .btn-right {
                display: flex;
            }

            .table-title {
                font-size: 14px;
                font-weight: bold;
                height: 30px;
                line-height: 30px;

                span {
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background-color: #418ee9;
                    border-radius: 1000%;
                    overflow: hidden;
                    margin-right: 10px;
                    margin-bottom: 3px;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.compilationSummary {
    .formList {
        .el-form-item {
            width: 22%;
        }
        .el-form-item:last-child {
            width: 32%;
            .el-form-item__content {
                width: 100%;
            }
        }
        .el-form-item.btnBox {
            margin-bottom: 0px;
            width: 18%;
            margin-right: 0;

            .el-form-item__content {
                display: flex;
            }
        }
    }
}
/deep/ .el-form-item--mini .el-form-item__content {
    line-height: 35px;
}
</style>
